/**
 * @name RouterDemo
 * @author darcrand
 * @desc
 */

import React, { Component, Fragment } from "react"
import { Route, Link, withRouter } from "react-router-dom"

import "./styles.css"

class RouterDemo extends Component {
    render() {
        return (
            <div>
                <h1>Router Dome</h1>

                <Link to="/router-demo/route-a">go to A</Link>

                <Link
                    to={{
                        pathname: "/router-demo/route-b",
                        query: { name: "jack" },
                        state: { value: 123 },
                        search: "?sort=name",
                        hash: "#the-hash",
                        customAttr: "custom-value"
                    }}
                >
                    go to B
                </Link>
                <Link to="/router-demo/route-c/abcxyz/jake">go to C</Link>
                <Link to="/router-demo/route-d">go to D</Link>

                <Route path="/router-demo/route-a" component={RouteA} />
                <Route path="/router-demo/route-b" component={RouteB} />
                <Route path="/router-demo/route-c/:id/:name" component={RouteC} />
                <Route path="/router-demo/route-d" component={RouteD} />
            </div>
        )
    }
}

function RouteA(props) {
    console.log("route a :", props)
    return (
        <section>
            <h2>Router A</h2>
            <p>无参数</p>
        </section>
    )
}

function RouteB(props) {
    console.log("route b :", props)

    return (
        <section>
            <h2>Router B</h2>
            <p>在location中的参数</p>
            <ul>
                <li>query</li>
                <li>state</li>
                <li>search</li>
                <li>hash</li>
                <li>自定义属性</li>
            </ul>
        </section>
    )
}

function RouteC(props) {
    console.log("route c :", props)

    return (
        <section>
            <h2>Router C</h2>
            <p>在params中的参数</p>
        </section>
    )
}

class RouteD extends Component {
    onClick = () => {
        this.props.history.push("/router-demo/route-a")
    }
    render() {
        return (
            <section>
                <h2>使用路由对象跳转</h2>
                <button onClick={this.onClick}>go to A</button>
                <RouteDInner />
            </section>
        )
    }
}

@withRouter
class RouteDInner extends Component {
    onClick = () => {
        this.props.history.push({
            pathname: "/router-demo/route-b",
            query: { name: "jack" },
            state: { value: 123 },
            search: "?sort=name",
            hash: "#the-hash",
            customAttr: "custom-value"
        })
    }
    render() {
        return (
            <Fragment>
                <h2>这是一个没有直接继承 "Route" 类的组件, 但可以使用 "withRouter" 间接继承.</h2>
                <button onClick={this.onClick}>go to B</button>
            </Fragment>
        )
    }
}

export default RouterDemo
